<template>
	<view class="login">
		<view class="login-main">

			<template v-if="!status">

				<view class="login-logo">
					<image src="/static/img/logo.png"></image>
				</view>

				<!-- <view class="login-list flex border-all">
					<view class="myicon2"><image src="/static/img/icon/zhanghao.png"></image></view>
					<view class="login-input">
						<input  type="number" name="v_rec_code" placeholder="请输入推荐码" maxlength="10" class="is-input1"  v-model="v_rec_code" style="color: gray;" @blur="checkRecCode"/>
					</view>
					<view>
						<text>红娘:<b style="color: red;">{{code_name}}</b></text>
					</view>
				</view> -->



				<!-- <view class="login-list flex border-all">
					<view class="myicon2"><image src="/static/img/icon/zhanghao.png"></image></view>
					<view class="login-input">
						<input type="text"  v-model="nickname" name="nickname" placeholder="请输入昵称" class="is-input1"/>
					</view>
				</view> -->

				<view class="login-list flex border-all">
					<view class="myicon2">
						<image src="/static/img/icon/zhanghao.png"></image>
					</view>
					<view class="login-input">
						<input type="text" v-model="username" name="username" placeholder="请输入账号" class="is-input1" />
					</view>
				</view>

				<!-- <view class="login-list flex border-all">
					<view class="myicon2"><image src="/static/img/icon/zhanghao.png"></image></view>
					<view class="login-input">
						<input type="number"  v-model="phone" placeholder="请输入手机号码" maxlength="11" />
					</view>
				</view> -->

				<!-- <view class="login-list flex border-all">
					<view class="iconfont icon-yanzhengyanzhengma flex"></view>
					<view class="login-input">
						<input type="number" maxlength="6" placeholder="请输入验证码" class="is-input1" v-model="code" />
					</view>
					<view class="code-sx"></view>
					<view v-if="verifyShow" @click="verifyBtn()">
					   <view class="border-bottom flex align-center justify-center font-sm text-white"  style="width: 180rpx;" @click="getCode">获取验证码</view>
					</view>
					
					<view v-else style="background-color:#C0C0C0;color: #fff;border-radius:3px;width: 100px;text-align: center;">
						<text>{{verifyTip+'秒'}}</text>
					</view>
					
				</view> -->

				<view class="login-list flex border-all">
					<view class="myicon2">
						<image src="/static/img/icon/zhanghao.png"></image>
					</view>
					<view class="login-input">
						<input name="password" placeholder="请输入密码" class="is-input1" password="true"
							v-model="password" />
					</view>
				</view>

				<button class="cu-btn register-btn" type="primary" :disabled="disabled"
					:class="disabled ? 'bg-main-disabled' : 'bg-main'" @click="submit" :loading="loading">{{ loading ?
						'注册中...' : '注册'}}</button>
				<button class="cu-btn login-btn" style="background-color:#F14399 !important" @click="denglu"> 登录</button>
			</template>

		</view>



	</view>
</template>

<script>
import uniStatusBar from '@/common/uni-status-bar/uni-status-bar.vue';

export default {
	components: {
		uniStatusBar,

	},
	data() {
		return {
			status: false,
			username: "",
			nickname: "",
			password: "",
			phone: "",
			code: "",
			v_rec_code: "",
			loading: false,
			code_name: "",

			//验证码发送后隐藏
			verifyShow: true,
			seen: true,
			verifyTip: "60",
		}
	},
	onLoad(options) {

		this.v_rec_code = options.reg_code;
	},
	computed: {
		disabled() {
			// if ((this.username === '' || this.password === '') && (this.phone === '' || this.code === '' || this.rpassword === '')) {
			// 	return true
			// }
			if (this.username === '' || this.password === '') {
				return true
			}
			return false
		}
	},
	methods: {

		//隐藏验证码
		// async verifyBtn() {

		// 	if (this.phone == "" || this.phone.length != 11) {
		// 		uni.showToast({
		// 			title: "手机格式不正确",
		// 			duration: 3000,
		// 			icon: 'none'
		// 		})
		// 	}else{
		// 		this.timedown(60) // this.timedown(60)
		// 		this.verifyShow = false
		// 	}

		// },
		timedown: function (num) {
			let that = this;
			if (num == 0) {
				that.verifyShow = true; // 是否显示获取验证码
				return clearTimeout();
			} else {
				that.verifyShow = false; // 是否显示获取验证码
				setTimeout(function () {
					that.verifyTip = num - 1
					that.timedown(num - 1);
				}, 1000); //定时每秒减一  
			}
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 初始化表单
		initForm() {
			this.username = ''
			this.nickname = ''
			this.password = ''
			this.phone = ''
			this.code = ''
			this.v_rec_code = ''
		},
		// 切换登录方式
		changeStatus() {
			// 初始化表单
			this.initForm()
			this.status = !this.status
		},
		denglu() {
			// 初始化表单
			uni.navigateTo({
				url: '/pagesA/login/login'
			});
		},

		// 获取验证码
		async getCode() {
			// 防止重复获取
			if (this.codeTime > 0) {
				return;
			}
			// 验证手机号
			if (!this.validate()) return;

			const res = await this.$myRuquest({
				url: '/index/api/sendcode',
				data: {
					"phone": this.phone,
				},
			})

			if (res.data.code == 200) {
				uni.showToast({
					title: res.data.info,
					duration: 3000,
					icon: 'none'
				})

			} else {
				uni.showToast({
					title: res.data.info,
					duration: 3000,
					icon: 'none'
				})

			}

		},
		// 表单验证
		// validate(){
		// 	//手机号正则
		// 	var mPattern = /^1[3456789]\d{9}$/; 
		// 	if (!mPattern.test(this.phone)) {
		// 		uni.showToast({
		// 			title: '手机号格式不正确',
		// 			icon: 'none'
		// 		});
		// 		return false
		// 	}
		// 	// ...更多验证
		// 	return true
		// },
		// 检查推荐码 checkRecCode
		// async checkRecCode(){
		// 	if(this.v_rec_code.trim() === '') return;
		// 	const res = await this.$myRuquest({
		// 		url: '/index/api/checkRecCode',
		// 		data: {
		// 			"shop_code": this.v_rec_code
		// 		},
		// 	});

		// 	if(res.data.code !== 200){
		// 		uni.showToast({
		// 			title: '推荐码不存在',
		// 			duration: 3000,
		// 			icon: 'none'
		// 		});
		// 		this.v_rec_code = '';
		// 		this.code_name='会员不存在';
		// 	}else{
		// 		this.code_name=res.data.date.username;
		// 	}
		// },
		// 提交
		async submit() {
			// console.log(111)
			if(this.username.length<6 || this.username.length>15 || this.password.length<6 || this.password.length>15){
				uni.showToast({
					title: "长度最少6位,最大15位",
					duration: 3000,
					icon: 'none'
				})
				return false
			}

			// 表单验证
			const res = await this.$myRuquest({
				url: '/index/api/register',
				data: {
					// "v_rec_code":this.v_rec_code,
					"username": this.username,
					// "phone":this.phone,
					"password": this.password,

				},
			})

			if (res.data.code == 200) {
				setTimeout(() => {
					uni.showToast({
						title: res.data.info,
						duration: 3000,
						icon: 'none'
					})
				}, 400)

				uni.redirectTo({
					url: '/pages/login/login'
				});
			} else {
				uni.showToast({
					title: res.data.info,
					duration: 3000,
					icon: 'none'
				})
			}
		}

	}
}
</script>

<style lang="scss">
page {
	background-color: #FFFFFF;
}

.flex {
	display: flex;
}

.myicon2 image {
	width: 25px;
	height: 25px;

}

.login {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.login-main {
	flex: 1;
	padding: 0 70upx;

	.login-logo {
		width: 200upx;
		height: 200upx;
		padding-bottom: 50upx;
		margin: 50upx auto 0 auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.logo-tip {
		text-align: center;
		padding-top: 25upx;
		font-size: 32upx;
		font-weight: 200;
		color: rgba(51, 51, 51, 1);
		padding-bottom: 50upx;
	}

	.login-list {
		margin-top: 35upx;
		height: 100upx;
		align-items: center;
		padding: 0 30upx;
		border: 1px solid #E8E8E8;
		border-radius: 25px;

		&.border-all {
			&:after {
				border: 1px solid #D0D0D0;
				border-radius: 100upx;
			}
		}

		.iconfont {
			width: 65upx;
			font-size: 44upx;
			align-items: center;

			&:after {
				margin-left: 20upx;
				content: '';
				width: 2upx;
				height: 35upx;
				background: #D0D0D0;
				display: block;
			}
		}

		.login-input {
			flex: 1;

			input {
				font-size: 28upx;
				color: #333333;
				padding-left: 20upx;
			}
		}

		.code-sx {
			content: '';
			width: 2upx;
			height: 25upx;
			background: #D0D0D0;
			margin-right: 25upx;
		}

		.codeimg {
			font-size: 24upx;
			color: #999999;
		}
	}

	.register-btn {
		margin-top: 70upx;
		height: 96upx;
		width: 100%;
		background: linear-gradient(-90deg, rgba(80, 85, 168, 1), rgba(104, 110, 210, 1));
		border-radius: 47upx;
		font-size: 34upx;
		color: #ffffff;
	}

	
	.login-btn {
		margin-top: 70upx;
		height: 96upx;
		width: 100%;
		background: linear-gradient(-90deg, #f14399ad, #F14399);
		border-radius: 47upx;
		font-size: 34upx;
		color: #ffffff;
	}


}

.login-footer {
	padding: 0 70upx;

	.footer-tip {
		margin-top: 20upx;
		align-items: center;
		font-size: 24upx;
		color: #999999;
		text-align: center;

		&:before {
			flex: 1;
			content: '';
			height: 2upx;
			background: #D0D0D0;
			margin-right: 30upx;
		}

		&:after {
			margin-left: 30upx;
			flex: 1;
			content: '';
			height: 2upx;
			background: #D0D0D0;
		}

	}

	.footer-other {
		padding: 40upx 0 100upx 0;
		justify-content: center;

		.other-list {
			width: 80upx;
			height: 80upx;
			margin: 0 75upx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}
}
</style>
